<template>
  <div>
    <p @click="forgetclick">忘记密码</p>
    <!-- /点击忘记密码的对话框 -->
    <el-dialog
      title="忘记密码"
      :visible.sync="dialogVisibleForget"
      width="50%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="手机号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="预留邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="successxiugai">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 手机邮箱一致的时候会有的对话框 -->
    <el-dialog
      title="忘记密码"
      :visible.sync="dialogVisibleForgetNew"
      width="50%"
      :before-close="handleClose"
      append-to-body
    >
      <el-form ref="form" :model="form" label-width="auto">
        <el-form-item label="请输入新密码">
          <el-input type="password" v-model="form.passwordnew"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" v-model="form.passwordque"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="successxiugaisuccess">确 定</el-button>
      </span>
    </el-dialog>
    <!-- //如果不一致的对话框我是策划师 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleBuYiZhi"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
      <p>您填写的手机号和预留邮箱不一致，请重新填写或联系贵公司管理员为您重置密码！</p>
    </el-dialog>
    <!--如果不一致的对话框我是客户新人  -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleBuYiZhiNew"
      width="30%"
      :before-close="handleClose"
      append-to-body
    >
      <p>
        若是新人，提示如下：
        请联系网站客服为您重置密码：
        客服微信：123123123123
      </p>
      <div class="ER">
        <img src="../../assets/imgs/erweima.png" alt />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../api";
export default {
  mame: "Forget",
  data() {
    return {
      form: {},
      dialogVisibleForget: false,
      //新密码的对话框显示
      dialogVisibleForgetNew: false,
      //   手机邮箱不一致的对话框策划
      dialogVisibleBuYiZhi: false,
      //   手机邮箱不一致的对话框客户新人
      dialogVisibleBuYiZhiNew: false
    };
  },
  methods: {
    //点击忘记密码的事件
    forgetclick() {
      this.dialogVisibleForget = true;
    },
    handleClose() {
      this.dialogVisibleForget = false;
      this.dialogVisibleForgetNew = false;
      this.dialogVisibleBuYiZhi = false;
      this.dialogVisibleBuYiZhiNew = false;
    },
    successxiugai() {
      // 如果手机号和预留邮箱一致的话
      if (this.form.username && this.form.email) {
        api
          .getchanges({
            phone: this.form.username,
            email: this.form.email
          })
          .then(res => {
            // console.log(res.data)
            if (res.data.status == 200) {
              this.dialogVisibleForgetNew = true;
            } else {
              this.$confirm("你是否为公司内部人员?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              })
                .then(() => {
                  //   如果在不一致的情况下我是策划师
                  this.dialogVisibleBuYiZhi = true;
                })
                .catch(() => {
                  //   我是新人客户人群
                  this.dialogVisibleBuYiZhiNew = true;
                });
              this.$message({
                type: "info",
                message:
                  "验证填写的手机号、邮箱是否与注册或添加账号时候数据库留存的一致"
              });
            }
          });
      }
    },
    //最终的修改成功的按钮
    successxiugaisuccess() {
      api
        .getchangepwd({
          phone: this.form.username,
          email: this.form.email,
          password: this.form.passwordnew
        })
        .then(res => {
          // console.log(res.data)
          if (res.data.msg == "success") {
            this.dialogVisibleForget = false;
            this.dialogVisibleForgetNew = false;
             this.$message({
              type: "success",
              message: "密码修改成功快去登录"
            });
          } else {
            this.$message({
              type: "info",
              message: "修改失败请检查您的网络"
            });
          }
        });

      //把密码修改成功后

      // if (true) {
      //   this.dialogVisibleForget = false;
      //   this.dialogVisibleForgetNew = false;
      // } else {
      //   this.$message({
      //     type: "info",
      //     message: "修改失败请检查您的网络"
      //   });
      // }
    }
  }
};
</script>

<style lang="less" scoped>
.ER {
  width: 200px;
  margin: auto;
  img {
    width: 150px;
  }
}
</style>